<template>
	<div class="citylist" >
		<div class="container" ref="container">
			<div>
				<!-- 热门城市 -->
				<div>
					<h2 class="h2">热门城市</h2>
					<ul>
						<li v-for="(item,index) of hotCities"  @click="changecity(item.name,index)">{{item.name}}</li>
					</ul>
				</div>
				<!-- 字母排序 -->
				<div>
					<h2 class="h2">字母排序</h2>
					<ul>
						<li v-for="(item,key) of citylist" @click="letter(key)" class="bordernone">{{key}}</li>
					</ul>
				</div>
				<!-- 城市 -->
				<div v-for="(item,key) of citylist" :ref="key">
					<h2 class="h2" >{{key}}</h2>
					<ul>
						<li v-for="(li,index) of item" class="city" @click="changecity(li.name,index)">{{li.name}}</li>
					</ul>
				</div>
				<!-- <div v-for="(item,index) of citylist">
					<h2 class="h2">{{index}}</h2>
					<ul>
						<li v-if="item.hotlist" v-for="li of item.hotlist">{{li.city}}</li>
						<li v-if="item.letterlist" v-for="li of item.letterlist" class="bordernone" @click="letter">{{li.city}}</li>
						<li v-if="item.citylist"  v-for="li of item.citylist" class="city">{{li.city}}</li>
					</ul>
				</div> -->
			</div>
		</div>
		<div class="top" @click="gotop">↑</div>
	</div>
</template>
<script>

	import BScroll from 'better-scroll'
	import {mapMutations} from 'vuex'
	export default{
		props:["citylist","hotCities"],
		data(){
			return{
				scroll:""
			}
		},
		mounted(){
			var container = this.$refs['container'];//获取DOM节点
    		this.scroll = new BScroll(container)
		},
		methods:{
			...mapMutations(['changeCity']),
			letter(e){
				// console.log(e.target.innerHTML)
				var h2 = document.getElementsByClassName("h2");
				// console.log(h2[1].innerHTML);
				// console.log(e.target.parentNode.parentNode.parentNode)
				// console.log(this.citylist[2].name)
        		// info.scrollTo(2000,500)
        		
    			// console.log(this.$refs[e][0])
    			this.scroll.scrollToElement(this.$refs[e][0],500)
			},
			gotop(){
				this.scroll.scrollTo(0,0,500)
			},
			changecity(name,index){
				// console.log(name,index)
				this.changeCity(name);//这里的changeCity和此文件的事件名不能相同
				this.$router.push("/")
			}
		}
	}
</script>
<style scoped>
	.container{
        position: absolute;
        left:0;
        right:0;
        bottom: 0;
        top:1.5rem;
        background: #f5f5f5;
      }
	.citylist h2{
	    font-size: .24rem;
    	padding: .24rem .3rem;
        background: #f5f5f5;
	}
	.citylist  ul{
		background: #fff;
		overflow: hidden;
	}
	.citylist  ul li{
		width: 33.33%;
	    height: .9rem;
	    line-height: .9rem;
	    font-size: .28rem;
	    text-align: center;
	    border-bottom: .02rem solid #ddd;
	    margin-bottom: -1px;
	    float: left;
	    position: relative;
	    z-index: 10;
	    color: #212121;
	    border-right:0.02rem solid #ddd;
	    margin-left: -1px;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow:hidden;
	}
	.citylist  ul li.bordernone{
		border:none;
		margin:0;
		width: 16.66%;
	}
	.citylist  ul li.city{
		width: 25%;
	}
	.top{
		position: fixed;
		right:0.4rem;
		bottom:0.2rem;
		font-size: 0.6rem;
		width: 0.5rem;
		text-align: center;
	}
</style>